<!--
 * @Author: 刘十三
 * @Date: 2024-01-02 10:23:22
 * @LastEditors: 刘十三
 * @LastEditTime: 2024-01-05 16:43:56
 * @FilePath: \dev-1.3.1-nm\dev\pages\internal\linkage\components\historyList.vue
 * @Description: 内蒙多员联动 - 信息录入（反馈历史列表）
-->

<template>
  <view class="content">
    <template v-if="list && list.length > 0">
      <view class="list" v-for="(item, index) in list" :key="index">
        <view class="n-lay">
          <view class="m-flex-row">
            <view class="main-title">{{ item.content || "/" }}</view>
            <u-tag style="flex-shrink: 0" mode="dark" shape="circle" text="未办结" v-if="item.isDoneCode == '0'"></u-tag>
            <u-tag style="flex-shrink: 0" mode="dark" type="info" shape="circle" text="已办结" v-else></u-tag>
          </view>
          <view class="item-sub-content">
            <view class="item-sub-line">
              <text class="sub-title">反馈类型: {{ item.categoryName }}</text>
            </view>
            <view class="item-sub-line">
              <text class="sub-title">反馈人: {{ item.feebackPersonsName }}</text>
              <text style="margin-top: 20rpx">{{ item.feedbackDate }}</text>
            </view>
          </view>
        </view>
      </view>
    </template>
    <view v-if="list.length == 0" class="no-data">
      <u-image src="/static/mescroll-empty.png" mode="widthFix" width="160px" height="160px"></u-image>
      <text class="no-text">~~ 暂无数据 ~~</text>
    </view>
  </view>
</template>
<script>
import linkageService from "@/service/internal/linkeage.service";
export default {
  name: "historyList",
  props: {
    licenseNo: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      list: [],
    };
  },
  watch: {
    licenseNo: {
      handler(val) {
        this.loadData();
      },
      immediate: true,
    },
  },
  methods: {
    loadData() {
      linkageService
        .getFeedbackByLicense(this.licenseNo)
        .then((res) => {
          if (res.success) {
            this.list = res.data;
          } else {
            this.list = [];
            this.$u.toast(res.msg);
          }
        })
        .catch((err) => {
          this.tableData = [];
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.list {
  padding: 10rpx;
  overflow: hidden;
  font-size: 14px;
  border-radius: 15px;
  margin-bottom: 10px;
  background-color: #ffffff;
  box-sizing: border-box;
  .n-lay {
    width: 100%;
    padding: 15rpx;
  }

  .m-flex-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }

  .main-title {
    font-size: 28rpx;
    flex: 1;
    word-break: break-all;
    color: #333333;
    font-weight: 400;
    margin-right: 20rpx;
  }
  .sub-title {
    background: #f5f5f5;
    color: #989ea1;
    font-size: 24rpx;
    border-radius: 4px;
    margin-right: 10px;
    margin-top: 20rpx;
    padding: 4px 8px;
  }
  .item-sub-line {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 24rpx;
  }
}

.no-data {
  width: 160px;
  margin: 10vh auto 0;
  text-align: center;
}
.no-text {
  display: inline-block;
  font-size: 13px;
  margin-top: 15px;
}
</style>
